<template>
  <div class="flex flex-col min-h-screen bg-gray-100 text-gray-800">
    <header class="text-2xl font-bold p-4 flex justify-center items-center">
      <div class="absolute left-5">
        <div class="flex flex-row items-center">
          <span>{{ currentTime }}</span>
          <div class="flex flex-row text-sm ml-4">
            <span class="mx-2">{{ currentWeek }}</span>
            <span>{{ currentDate }}</span>
          </div>
        </div>
      </div>
      <span class="mr-5">第三师经济运行数据监测可视化展板</span>

      <a-select ref="select" v-model:value="year" :options="yearOption" style="width: 120px">
      </a-select>
    </header>

    <main class="flex-1 mx-auto p-3 w-full grid grid-rows">
      <!-- 第一行四个框 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <GDPSection :yearStr="year" />
        <PopGDPSection :yearStr="year" />
        <FixedAssetSection :yearStr="year" />
        <RetailSection :yearStr="year" />
      </div>
      <!-- 后续布局 -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="flex flex-col">
          <IndustryStructure :yearStr="year" />
          <IndustrySectors :yearStr="year" />
          <IndustryOverview :yearStr="year" />
        </div>
        <div class="flex flex-col">
          <EconomicOverviewChart />
          <InvestmentProgress :yearStr="year" />
        </div>
        <div class="flex flex-col">
          <PopulationEmployment />
          <ConsumptionMarket />
          <!-- <UtilityUsage /> -->
          <HighwayTFGrowthChart :yearStr="year" />
        </div>
      </div>
    </main>

    <footer class="bg-white py-4 px-6 text-center text-sm border-t">
      <p>© 2025 政务服务和大数据局. 保留所有权利.</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
// import GDPSection from './components/GDPSection.vue'
import GDPSection from './components/GDPSection.vue'
import PopGDPSection from './components/PopGDPSection.vue'
import FixedAssetSection from './components/FixedAssetSection.vue'
import RetailSection from './components/RetailSection.vue'
import IndustryStructure from './components/IndustryStructure.vue'
import PopulationEmployment from './components/PopulationEmployment.vue'
// import UtilityUsage from './components/UtilityUsage.vue'
import IndustrySectors from './components/IndustrySectors.vue'
import ConsumptionMarket from './components/ConsumptionMarket.vue'
import InvestmentProgress from './components/InvestmentProgress.vue'
import EconomicOverviewChart from './components/EconomicOverviewChart.vue'
import IndustryOverview from './components/IndustryOverview.vue'
import HighwayTFGrowthChart from './components/HighwayTFGrowthChart.vue'
import { onMounted, onUnmounted, ref } from 'vue'
const currentTime = ref('')
const currentWeek = ref('')
const currentDate = ref('')
const timer = ref<any>(null)
const year = ref('2024')
const yearOption = ref([
  {
    value: '2024',
    label: '2024',
  },
  {
    value: '2023',
    label: '2023',
  },

  {
    value: '2022',
    label: '2022',
  },
  {
    value: '2021',
    label: '2021',
  },
  {
    value: '2020',
    label: '2020',
  },
])
/** 刷新时间 */
function refreshTime() {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  })
  // 获取星期
  const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  currentWeek.value = weekday[now.getDay()]
  // 获取当前日期
  currentDate.value = now.toISOString().split('T')[0] // 格式: YYYY-MM-DD
}

onMounted(() => {
  refreshTime()
  timer.value = setInterval(refreshTime, 1000)
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
}

/* 卡片通用样式 - 亮色主题 */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
}
/* 修正后的图表标题样式选择器 */
.text-lg.font-bold {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

/* 数据展示卡片样式 */
.data-card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.data-card h2 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.data-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.data-label {
  font-size: 0.875rem;
  color: #666;
}

/* 组件样式 */
.unit {
  font-size: 12px;
  color: #999999;
  margin-left: 5px;
}

/* 确保各组件在grid布局中正确展示，防止溢出等问题 */
main > div > * {
  width: 100%;
}
header {
  color: #393939;
  background: #d3dee8;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar-track-piece {
  background-color: #f8f8f800;
}
::-webkit-scrollbar {
  width: 16px;
  transition: all 2s;
}
::-webkit-scrollbar-thumb {
  background-color: #dddddd;
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bbb;
}
::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}
</style>
